﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="ComboBox#Overview" />Overview</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2">ComboBox</a> is an editor that allows users to select an item from a drop-down list.
        Users can click an item in the drop-down list or use the ARROW UP, ARROW DOWN, and ENTER keys to navigate between items and select them.
        When a user presses and holds an arrow key, the editor's window continuously navigates between items.
    </p>
    <p>
        The main ComboBox API members are listed below.
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.Data">Data</a> – Specifies the data source that populates the editor’s list items.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.TextFieldName">TextFieldName</a> – Specifies the data source’s field that supplies text for items.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.Text">Text</a> – Specifies the editor’s text.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.TextChanged">TextChanged</a> - Fires when the editor text was changed.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.Value">Value</a> – Specifies the drop-down list’s selected value.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2.ValueChanged">ValueChanged</a> – Fires when the selected value was changed.</li>
    </ul>
    <p>
        The ComboBox component supports different size modes. To specify the component's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxResizableEditorBase-2.SizeMode">SizeMode</a> property. To apply different size modes, use the drop-down list in the demo card's header.
    </p>
    <p>
        This demo illustrates how to bind the ComboBox to a list of complex business objects.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Selected item: { FirstName=<b>@SelectedRealBusinessObject.FirstName</b>, LastName=<b>@SelectedRealBusinessObject.LastName</b>, Department=<b>@SelectedRealBusinessObject.Department</b> }
            </TitleTemplate>
        </DemoToolbar>

    </div>
    <div class="card-body mw-480">
        <DxComboBox Data="@Staff.DataSource"
                    TextFieldName="@nameof(Person.Text)"
                    @bind-Value="@SelectedRealBusinessObject"
                    SizeMode="SizeMode"></DxComboBox>
    </div>
</div>

<CodeSnippet_Editor_ComboBox></CodeSnippet_Editor_ComboBox>


@code {
    Person SelectedRealBusinessObject { get; set; } = Staff.DataSource[0];
}
